<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <h1>Embedded content</h1>

    <h3>audio</h3>

    <audio controls></audio>
    <audio></audio>

    <h3>img</h3>

    <img src="https://getbase.org/img/construction.jpg" width="100" height="100" alt="">
    <a href="#"><img src="https://getbase.org/img/construction.jpg" width="100" height="100" alt=""></a>

    <h3>svg</h3>

    <svg width="100px" height="100px">
      <circle cx="100" cy="100" r="100" fill="#ff0000" />
    </svg>

    <h3>video</h3>

    <video controls></video>
    <video></video>

    <h1>Interactive content</h1>

    <h3>details / summary</h3>
    <details>
      <summary>More info</summary>
      <p>Additional information</p>
      <ul>
        <li>Point 1</li>
        <li>Point 2</li>
      </ul>
    </details>

    <pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre>

    <pre><code class="block">&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="main"&gt; &lt;div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>

      <h3>blockquote</h3>

      <blockquote>
        <p>Some sort of famous witty quote marked up with a &lt;blockquote> and a child &lt;p> element.</p>
      </blockquote>

      <blockquote>Even better philosophical quote marked up with just a &lt;blockquote> element.</blockquote>

      <h3>ordered list</h3>

      <ol>
        <li>list item 1</li>
        <li>list item 1
          <ol>
            <li>list item 2</li>
            <li>list item 2
              <ol>
                <li>list item 3</li>
                <li>list item 3</li>
              </ol>
            </li>
            <li>list item 2</li>
            <li>list item 2</li>
          </ol>
        </li>
        <li>list item 1</li>
        <li>list item 1</li>
      </ol>

      <h3>unordered list</h3>

      <ul>
        <li>list item 1</li>
        <li>list item 1
          <ul>
            <li>list item 2</li>
            <li>list item 2
              <ul>
                <li>list item 3</li>
                <li>list item 3</li>
              </ul>
            </li>
            <li>list item 2</li>
            <li>list item 2</li>
          </ul>
        </li>
        <li>list item 1</li>
        <li>list item 1</li>
      </ul>

      <h3>description list</h3>

      <dl>
        <dt>Description name</dt>
        <dd>Description value</dd>
        <dt>Description name</dt>
        <dd>Description value</dd>
        <dd>Description value</dd>
        <dt>Description name</dt>
        <dt>Description name</dt>
        <dd>Description value</dd>
      </dl>

      <h3>figure</h3>

      <figure>
        <img style="max-width: 100%;" src="https://getbase.org/img/construction.jpg" alt="Construction">
        <figcaption>Figcaption content</figcaption>
      </figure>

      <h1>Tabular data</h1>

      <table>
        <caption>Jimi Hendrix - albums</caption>
        <thead>
          <tr>
            <th>Album</th>
            <th>Year</th>
            <th>Price</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th>Album</th>
            <th>Year</th>
            <th>Price</th>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>Are You Experienced</td>
            <td>1967</td>
            <td>10.00</td>
          </tr>
          <tr>
            <td>Axis: Bold as Love</td>
            <td>1967</td>
            <td>12.00</td>
          </tr>
          <tr>
            <td>Electric Ladyland</td>
            <td>1968</td>
            <td>10.00</td>
          </tr>
          <tr>
            <td>Band of Gypsys</td>
            <td>1970</td>
            <td>12.00</td>
          </tr>
        </tbody>
      </table>

      <h1>Forms</h1>

      <form>
        <fieldset>
          <legend>Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.</legend>
          <p><label>Text input <input type="text" value="default value that goes on and on without stopping or punctuation"></label></p>
          <p><label>Email input <input type="email"></label></p>
          <p><label>Search input <input type="search"></label></p>
          <p><label>Tel input <input type="tel"></label></p>
          <p><label>URL input <input type="url" placeholder="https://"></label></p>
          <p><label>Password input <input type="password" value="password"></label></p>
          <p><label>File input <input type="file"></label></p>

          <p><label>Radio input <input type="radio" name="rad"></label></p>
          <p><label>Checkbox input <input type="checkbox"></label></p>
          <p><label><input type="radio" name="rad"> Radio input</label></p>
          <p><label><input type="checkbox"> Checkbox input</label></p>

          <p><label>Select field <select><option>Option 01</option><option>Option 02</option></select></label></p>
          <p><label>Textarea <textarea cols="30" rows="5" >Textarea text</textarea></label></p>
        </fieldset>

        <fieldset>
          <legend>Inputs as siblings of labels</legend>
          <p><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></p>
          <p><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></p>
          <p><label for="ir">Range input</label> <input type="range" id="ir" value="10"></p>
          <p><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></p>
          <p><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></p>
          <p><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></p>
          <p><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></p>
          <p><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></p>

          <p><label for="irb">Radio input</label> <input type="radio" id="irb" name="rad"></p>
          <p><label for="icb">Checkbox input</label> <input type="checkbox" id="icb"></p>
          <p><input type="radio" id="irb2" name="rad"> <label for="irb2">Radio input</label></p>
          <p><input type="checkbox" id="icb2"> <label for="icb2">Checkbox input</label></p>

          <p><label for="s">Select field</label> <select id="s"><option>Option 01</option><option>Option 02</option></select></p>
          <p><label for="t">Textarea</label> <textarea id="t" cols="30" rows="5" >Textarea text</textarea></p>
        </fieldset>

        <fieldset>
          <legend>Clickable inputs and buttons</legend>
          <p><input type="image" src="https://getbase.org/img/construction.jpg" width="90" height="24" alt="Image (input)"></p>
          <p><input type="reset" value="Reset (input)"></p>
          <p><input type="button" value="Button (input)"></p>
          <p><input type="submit" value="Submit (input)"></p>
          <p><input type="submit" value="Disabled (input)" disabled></p>


          <p><button type="reset">Reset (button)</button></p>
          <p><button type="button">Button (button)</button></p>
          <p><button type="submit">Submit (button)</button></p>
          <p><button type="submit" disabled>Disabled (button)</button></p>
        </fieldset>

        <fieldset id="boxsize">
          <legend>box-sizing tests</legend>
          <div><input type="text" value="text"></div>
          <div><input type="email" value="email"></div>
          <div><input type="search" value="search"></div>
          <div><input type="url" value="https://example.com"></div>
          <div><input type="password" value="password"></div>

          <div><input type="color" value="#000000"></div>
          <div><input type="number" value="5"></div>
          <div><input type="range" value="10"></div>
          <div><input type="date" value="1970-01-01"></div>
          <div><input type="month" value="1970-01"></div>
          <div><input type="week" value="1970-W01"></div>
          <div><input type="datetime" value="1970-01-01T00:00:00Z"></div>
          <div><input type="datetime-local" value="1970-01-01T00:00"></div>

          <div><input type="radio"></div>
          <div><input type="checkbox"></div>

          <div><select><option>Option 01</option><option>Option 02</option></select></div>
          <div><textarea cols="30" rows="5">Textarea text</textarea></div>

          <div><input type="image" src="https://getbase.org/img/construction.jpg" width="90" height="24" alt="Image (input)"></div>
          <div><input type="reset" value="Reset (input)"></div>
          <div><input type="button" value="Button (input)"></div>
          <div><input type="submit" value="Submit (input)"></div>

          <div><button type="reset">Reset (button)</button></div>
          <div><button type="button">Button (button)</button></div>
          <div><button type="submit">Submit (button)</button></div>
        </fieldset>
      </form>
</body>
</html>